<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $(".c1").click(function(){
                $(this).animate({"left":"1600px","width":"150px","height":"150px","border-radius":"30%"},1000)
                    .animate({"left":"1600px","top":"680px","width":"200px","height":"200px","border-radius":"50%"},500)
                    .animate({"left":"0px","top":"680px","width":"150px","height":"150px","border-radius":"30%"},1000)
                    .animate({"left":"0px","top":"0px","width":"100px","height":"100px","border-radius":"0%"},500)
                // 可以通过代码实现点击的效果
                // 在jquery中所有函数均可以没有参数
                // click(fn):当用户点击了事件源之后触发对应的事件监听fn函数
                // click():表示通过代码实现用户点击的效果
                $(this).click();
            });
        })
    </script>
</head>
<body>
<div class="c1" style="width: 100px;height: 100px;background-color: red;position: relative;left: 0px;top: 0px;"></div>
</body>
</html>